{% extends "manage/layout.html" %}

{% set page_title = '机构创建' %}

{% block content %}
<style>
    #manage-class{
        position: absolute;
        left:700px;
        top: 5px;
    }
</style>
<div class="m-content">
    <form class="form-horizontal" method="POST" id="{{ form.__class__.__name__ }}">
        {{ form.hidden_tag() }}
        <fieldset class="fieldset" style="position: relative;">
            <legend>机构信息</legend>
            <a href="#" id="manage-class">
                管理教室 <span class="glyphicon-edit glyphicon"></span>
            </a>
            {% from "common/_formhelper.html" import render_field %}
            {{ render_field(form.name, class_="form-control", required=True) }}

            {{ render_field(form.display_name, class_="form-control") }}

            {{ render_field(form.code, class_="form-control", required=True) }}

            {% from "common/_formhelper.html" import render_select %}
            {{ render_select(form.scale) }}

            {{ render_select(form.admin) }}

            {{ render_field(form.contact_name, class_="form-control", required=True) }}

            {% from "common/_formhelper.html" import render_phone_field %}
            {{ render_phone_field(form.phone, class_="form-control", required=True) }}

            {% from "common/_formhelper.html" import render_email_field %}
            {{ render_email_field(form.email, class_="form-control") }}

            {{ render_select(form.school_type) }}

            {{ render_field(form.area, class_="form-control") }}

            {{ render_field(form.address, class_="form-control", required=True) }}

            <div class="form-group">
                <label class="col-sm-2 control-label" for="address">地图</label>
                <div class="col-sm-8">
                    <div id="school_map" style="width:100%;height:400px;"></div>
                </div>
            </div>

        </fieldset>
        <fieldset class="fieldset">
            <legend>账号信息</legend>
            {{ render_field(form.pwd, autocomplete="off", class_="form-control", readonly=True, label_nonrequired=True) }}

            {{ render_field(form.pwd_confirm, autocomplete="off", class_="form-control", readonly=True, label_nonrequired=True) }}

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-4">
                    <label class="checkbox">
                        {{ form.pwd_check }}
                        {% if form.form_type == "new" %}
                        使用默认密码{{ default_pwd }}
                        {% else %}
                        默认不修改密码
                        {% endif %}
                    </label>
                </div>
            </div>

            <div class="col-sm-offset-2 col-sm-4">
                <button class="btn btn-default" id='submit'>确认</button>
                <button id="return" class="btn btn-default">返回</button>
            </div>
        </fieldset>
    </form>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cv7iqQebH4ZN61DhRxfPSso7"></script>
<script type="text/javascript">
var map = new BMap.Map("school_map");           // 创建地图实例
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
</script>
<script type="text/javascript">
window.position_marker = null;

function setPoint() {
    var lng = $('#longitude').val();
    var lat = $('#latitude').val();
    if (lng && lat){
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 14);
        map.clearOverlays();
        position_marker = new BMap.Marker(point, {enableDragging:true});
        position_marker.addEventListener('dblclick', function(){
            map.centerAndZoom(this.getPosition(), 16);
        });
        map.addOverlay(position_marker);
    }else{
        positionAddress();
    }
}
function positionAddress() {
    var geo = new BMap.Geocoder();
    geo.getPoint($('#address').val(), function(point){
            if(point){
                map.centerAndZoom(point, 14);
                map.clearOverlays();
                position_marker = new BMap.Marker(point, {enableDragging:true});
                position_marker.addEventListener('dblclick', function(){
                    map.centerAndZoom(this.getPosition(), 16);
                });
                map.addOverlay(position_marker);
            }else{
                var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
                map.centerAndZoom(point, 10);                  // 初始化地图，设置中心点坐标和地图级别
                map.clearOverlays();
            }
    });
}

$(function(){
    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 10);                  // 初始化地图，设置中心点坐标和地图级别
    map.clearOverlays();
    setPoint();

    $('#area').autocomplete({
        source: "{{ url_for('manage.area_search') }}"
    });
    if (window.location.pathname.substring(window.location.pathname.length - 3) != 'new') {
        $('#manage-class').attr('href',
            window.location.pathname + '/classrooms');
    } else { $('#manage-class').remove(); }

    $('#SchoolForm').on('keyup keypress', function(e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            e.preventDefault();
            return false;
        }
    });

    $('#address').bind('keydown', function(e){
        var code = e.keyCode || e.which;
        if (code == 13) {
            positionAddress();
            e.preventDefault();
            return false;
        }
    });

    var checked = $('input:checkbox').prop('checked');
    if(checked){
        $('input[type="password"]').attr('readonly','readonly');
    }
    else{
        $('input[type="password"]').removeAttr('readonly');
    }

    $('input:checkbox').bind('click',function(){
        var checked=$(this).prop('checked');
        if(checked){
            $('input[type="password"]').attr('readonly','readonly');
        }
        else{
            $('input[type="password"]').removeAttr('readonly');
        }
    });

    $('#return').bind('click', function(e){
        e.preventDefault();
        window.location.href = "{{ url_for('manage.list_schools') }}";
    });

    $('#submit').click(function(){
        if(position_marker){
            var pos = position_marker.getPosition();
            $('#longitude').val(pos.lng);
            $('#latitude').val(pos.lat);
        }
    });

    $('#SchoolForm').submit(function(e){
        if(position_marker){
            var pos = position_marker.getPosition();
            $('#longitude').val(pos.lng);
            $('#latitude').val(pos.lat);
        }
    });
});
</script>
{% endblock %}
